<template>
  <div class="table-row v-topbar">
    <div class="cell v-topbar-item">
      <icon @click="goBack" name="arrow-left" fontSize="24px"></icon>
    </div>
    <div class="cell v-topbar-title">
      {{title}}
    </div>
    <div class="cell text-right">
      <v-button
        :style="rightBtnStyles"
        flat
        @click="onNextClick"
        v-analytics.click="{
          action: action || 'Next Click',
          category: category
        }"
      >
        <icon :name="rightIcon" fontSize="24px" v-if="rightIcon" />
        <span v-else>{{rightTitle}}</span>
      </v-button>
    </div>
  </div>
</template>

<script>
import { icon, button } from 'components'

export default {
  name: 'topbar',
  props: {
    nextAction: Function,
    rightTitle: String,
    title: String,
    category: String,
    action: String,
    rightIcon: String,
  },
  components: {
    icon,
    vButton: button,
  },
  computed: {
    rightBtnStyles() {
      return {
        textAlign: 'right',
        paddingRight: '12px',
        fontSize: '14px',
      }
    },
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    onNextClick() {
      if (typeof this.nextAction === 'function') {
        this.nextAction()
      }
    },
  },
}
</script>

<style lang="scss">
.v-topbar {
  position: fixed;
  height: 48px;
  background-color: #fff;
  z-index: 2000;
  & + div,
  & + img {
    display: block;
    padding-top: 48px !important;
  }
  border-bottom: 1px solid #e7e7e7;
  @media (-webkit-min-device-pixel-ratio: 2) {
    border-width: .5px;
  }
}

.v-topbar-item {
  padding: 0 12px;
}

.v-topbar-next {
  display: inline-block;
  width: 48px;
  line-height: 48px;
}

.v-topbar-title {
  width: 50%;
  text-align: center;
  font-size: 16px;
}
</style>
